{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="author" content="YuKalix">
    <title>数据集操作</title>
    <link rel="stylesheet" href="{% static 'css/operation_css.css' %}">

</head>
<body>

<div class="form display" id="form">
    <form action="{% url 'operation:spider' %}" method="get">
        <label for="key">
            <b>关键字</b>
            <input type="text" id="key" name="key" placeholder="请输入需要获取的关键字">
        </label>
        <input type="submit" name="" id="" value="提交">
    </form>
    <div class="log" style="color: red">
        <h1>dsadsa</h1>
    </div>
</div>

<div class="content">
    <button id="b1" onclick="b1_href()">Step1.开始数据获取</button>
    <button id="b2" onclick="b2_href()">Step2.开始处理数据集</button>
    <button id="b3" onclick="WebSocketTest()">Step3.测试按钮</button>
</div>


<script>
    function b1_href() {
        window.location.href = {% url 'operation:spider' %};
        {#var q = document.querySelector("#form");#}
        {#q.classList.remove("display");#}
    }

    function b2_href() {window.location.href = {% url 'operation:image_operation' %};
    }
</script>



<script>


    function WebSocketTest() {

        if ("WebSocket" in window) {
            {#alert("您的浏览器支持 WebSocket!");#}
            // 打开一个 web socket
            ws = new WebSocket("ws://127.0.0.1:8000/get_log/");
            ws.onopen = function () {
                // Web Socket 已连接上，使用 send() 方法发送数据
                ws.send("哈士奇");
                {#alert("数据发送中...");#}
            };
            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                {#alert("数据已接收...");#}
                alert("数据:" + received_msg)
            };

            ws.onclose = function () {
                // 关闭 websocket
                {#alert("连接已关闭...");#}
            };
        }

        else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }


</script>


</body>
</html>